<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar recharge">
			<view v-if="key_array.length > 0" class="recharge_bos">
				<block v-for="(item, i) in key_array" :key="i">
					<view class="recharge_title">使用{{item == 'coin' ? '纽扣币' : (item == 'score' ? '积分' : '礼金')}}充值</view>
					<view class="recharge_box">
						<block v-for="(tag, j) in dataObj[item]" :key="j">
							<view class="item" :class="{'linght': tag.id == currentId}" @tap="Onchoose(tag.id)">
								<view class="font15">抽奖{{tag.number}}次</view>
								<text class="font12">消耗{{tag.money}}{{item == 'coin' ? '纽扣币' : (item == 'score' ? '积分' : '礼金')}}</text>
							</view>
						</block>
					</view>
				</block>
			</view>
			<view v-else class="no_data">此活动不可充值</view>
		</view>
		<!-- 按钮 -->
		<view v-if="key_array.length > 0" class="fix-bottom-btn flex-row-center">
			<view class="btn flex-row-center font-ffffff font15" @click="Onbuy">立即充值</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				themeColor: '#03004c', // 主题颜色
				activityId: '', // 活动id
				currentId: '', // 当前选中的充值id
				dataObj: {},
				key_array: [], // 键值合集[coin, score, money]
			}
		},
		onLoad: function (options) {
			this.activityId = options.id
			this.getList()
		},
		methods: {
			// 获取充值列表
			getList() {
				this.$Http({
					url: 'getRechargeList',
					token: true,
					load: true,
					data: {
						activity_id: this.activityId,
					},
				}).then(res => {
					if (res.code == 1) {
						let arr = []
						Object.keys(res.data).forEach((item)=>{
							arr.push(item)
						})
						this.key_array = arr
						this.dataObj = res.data
					}
				})
			},
			// 选择
			Onchoose(id) {
				this.currentId = id
			},
			// 购买
			Onbuy() {
				if (this.currentId == '') {
					uni.showToast({ title: '请选择充值方式', icon: 'none' })
					return false
				}
				this.$Http({
					url: 'toolbuy',
					token: true,
					data: {
						id: this.currentId,
						activity_id: this.activityId
					},
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({ title: '充值成功' })
						setTimeout(()=>{
							// 返回活动
							uni.navigateBack({ delta: 1 });
						}, 2000)
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
